<template>
  <div
    class="icon-option"
    @click="init($event)"
    :style="[{ width: state.size, height: state.size }, state.style]"
    :class="[state.class]"
  >
    <el-popover :visible="state.visible" placement="bottom" :width="300" trigger="click" popper-style="padding:0px;">
      <template #reference>
        <v-icon :value="state.value" :size="state.size" :color="state.color" />
      </template>
      <template #default>
        <div class="flex-column" style="width: 100%; max-height: 320px; height: auto">
          <div class="v-table-toolbar border-bottom">
            <el-input
              v-model="state.keyword"
              style="width: 100%"
              suffix-icon="Search"
              placeholder="关键字"
              @keyup.enter="filter"
              @input="filter"
            >
            </el-input>
          </div>
          <div style="width: 100%; height: calc(100% - 32px)">
            <el-scrollbar wrap-style="width:100%;height:100%;" view-class="flex-row icon-list">
              <div class="icon-item border" @click="select($event, item)" v-for="(item, index) in state.ICON_Ary" :key="index">
                <v-icon :value="item.type + '#' + item.value" :size="state.size" :color="state.color" />
              </div>
            </el-scrollbar>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>
<script setup>
  import { reactive, getCurrentInstance, onMounted, onUnmounted, watch } from 'vue'
  defineOptions({ name: 'v-icon-option' })

  import VIcon from './v-icon.vue'

  const { proxy } = getCurrentInstance()
  const _this = proxy
  const props = defineProps({
    modelValue: {
      type: String,
      default: () => {
        return ''
      },
    },
    size: {
      type: String,
      default: '14px',
    },
    color: {
      type: String,
      default: () => null,
    },
    style: {
      type: Object,
      default: () => {},
    },
    class: {
      type: [Object, String],
      default: () => {},
    },
  })
  const state = reactive({
    visible: false,
    keyword: '',
    ICON_Ary: APP_GLOBAL.ICONS,
    value: props.modelValue || 'element#CirclePlus',
    size: props.size,
    color: props.color,
    style: props.style,
    class: props.class,
  })
  const emits = defineEmits(['update:modelValue', 'click'])
  watch(
    () => state.modelValue,
    (value, prevValue) => {
      if (state.modelValue === props.modelValue) {
        return
      }
      emits('update:modelValue', value)
    }
  )
  const filter = () => {
    const newArr = APP_GLOBAL.ICONS.filter((item, i, arr) => {
      return item.value.toLocaleLowerCase().indexOf(state.keyword.toLocaleLowerCase()) != '-1'
    })
    state.ICON_Ary = newArr
  }
  const select = function (e, item) {
    state.modelValue = item.type + '#' + item.value
    state.visible = false
    e.stopPropagation()
  }
  const leave = function () {
    console.log('leave')
  }
  const init = (e) => {
    state.visible = !state.visible
    e.stopPropagation()
  }
  watch(
    () => props,
    (newVal, oldVal) => {
      state.value = newVal.modelValue
      state.size = newVal.size
      state.color = newVal.color
      state.style = newVal.style
      state.class = newVal.class
    },
    { deep: true }
  )

  onMounted(() => {})

  onUnmounted(() => {})
</script>
<style rel="stylesheet/scss" lang="scss">
  .icon-option {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  .icon-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .icon-item {
    padding: 4px;
    cursor: pointer;
    margin: 2px;
  }

  .icon-item:hover {
    border-color: red;
  }
</style>
